<template>
  <view class="container">
    <!-- 优惠券列表 -->
    <view class="coupon-list">
      <view
        class="coupon-item"
        v-for="(item, index) in couponList"
        :key="index"
        @click="selectCoupon(item)"
      >
        <view class="left">
          <view class="amount">
            <text class="symbol">¥</text>
            <text class="number">{{ item.amount }}</text>
          </view>
          <view class="condition">满{{ item.condition }}元可用</view>
        </view>
        <view class="right">
          <view class="name">{{ item.name }}</view>
          <view class="time">有效期至 {{ item.endTime }}</view>
          <view class="use-btn" :class="{ used: item.used }">
            {{ item.used ? "已使用" : "立即使用" }}
          </view>
        </view>
      </view>
    </view>

    <!-- 无优惠券提示 -->
    <view class="empty" v-if="couponList.length === 0">
      <image src="/static/icons/empty.png" mode="aspectFit"></image>
      <text>暂无可用优惠券</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      couponList: [
        {
          id: 1,
          name: "新用户专享",
          amount: 50,
          condition: 200,
          endTime: "2024-12-31",
          used: false,
        },
        {
          id: 2,
          name: "节日特惠",
          amount: 30,
          condition: 150,
          endTime: "2024-12-31",
          used: true,
        },
        {
          id: 3,
          name: "会员专享",
          amount: 20,
          condition: 100,
          endTime: "2024-12-31",
          used: false,
        },
      ],
    };
  },
  methods: {
    selectCoupon(coupon) {
      if (coupon.used) {
        return;
      }

      // 将选中的优惠券信息返回给预约页面
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2];
      prevPage.$vm.selectedCoupon = coupon;

      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.coupon-list {
  .coupon-item {
    display: flex;
    background-color: #fff;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    overflow: hidden;

    .left {
      width: 200rpx;
      background-color: #ff6b6b;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20rpx;

      .amount {
        display: flex;
        align-items: baseline;

        .symbol {
          font-size: 32rpx;
          color: #fff;
        }

        .number {
          font-size: 60rpx;
          color: #fff;
          font-weight: bold;
        }
      }

      .condition {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.8);
        margin-top: 10rpx;
      }
    }

    .right {
      flex: 1;
      padding: 20rpx;
      position: relative;

      .name {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }

      .time {
        font-size: 24rpx;
        color: #999;
      }

      .use-btn {
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
        width: 120rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        background-color: #ff6b6b;
        color: #fff;
        border-radius: 25rpx;
        font-size: 24rpx;

        &.used {
          background-color: #ccc;
        }
      }
    }
  }
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;

  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  text {
    font-size: 28rpx;
    color: #999;
  }
}
</style> 